<template>
  <div class="p20">
    <div class="mb20">
      <vueForm
        ref="vueform"
        :span="12"
        :isCustomData="true"
        :customData="customData"
        :formConfigData="formConfigData"
        @buttonClickCallback="buttonClick"
      >
        <h2 slot="slot">slot内容</h2>
      </vueForm>
    </div>

    <div style="width: 100%; height: 20px; background-color: #f0f"></div>
    <!-- <div>
      <my-quarterDatepicker
        ref="quarterDatepicker"
        @chooseSeason="seasonChange"
      ></my-quarterDatepicker>
      <div class="m10">
        <my-autoComplete
          :formConfigData="formConfigItemData"
          :fromSource="autoComplete"
        >
        </my-autoComplete>
      </div>
      <div class="m10">
        <my-button :formConfigData="formConfigItemData" :fromSource="button11">
        </my-button>
      </div>
      <div class="m10">
        <my-checkbox
          :formConfigData="formConfigItemData"
          :fromSource="checkbox"
        >
        </my-checkbox>
      </div>
      <div class="m10">
        <my-checkboxButton
          :formConfigData="formConfigItemData"
          :fromSource="checkbox"
        >
        </my-checkboxButton>
      </div>
      <div class="m10">
        <my-radio :formConfigData="formConfigItemData" :fromSource="checkbox">
        </my-radio>
      </div>
      <div class="m10">
        <my-radioButton
          :formConfigData="formConfigItemData"
          :fromSource="checkbox"
        >
        </my-radioButton>
      </div>
      <div class="m10">
        <my-select
          :formConfigData="formConfigItemData"
          :fromSource="checkbox"
          :model="childModel"
        >
        </my-select>
      </div>
      <div class="m10">
        <my-icon
          :formConfigData="formConfigItemData"
          :fromSource="iconObj"
          :model="modelIcon"
        >
        </my-icon>
      </div>
      <div class="m10">
        <my-datepicker :formConfigData="formConfigItemData"> </my-datepicker>
      </div>
      <div class="m10">
        <my-input :formConfigData="formConfigItemData"> </my-input>
      </div>
      <div class="m10">
        <my-inputNumber :formConfigData="formConfigItemData"> </my-inputNumber>
      </div>
      <div class="m10">
        <my-dialogTree
          :formConfigData="formConfigItemData"
          :fromSource="selectTree"
          :placeholderLabel="placeholderLabel"
          modelKey="menuList"
          :model="childModel"
        >
        </my-dialogTree>
      </div>
      <div class="m10">
        <my-selectTree
          :formConfigData="formConfigItemData"
          :fromSource="selectTree"
          :placeholderLabel="placeholderLabel"
          modelKey="menuList"
          :model="childModel"
        >
        </my-selectTree>
      </div>
      <div class="m10">
        <my-switch
          :formConfigData="formConfigItemData"
          :fromSource="selectTree"
          modelKey="menuList"
        >
        </my-switch>
      </div>

      <div class="m10">
        <my-treeModal
          :formConfigData="formConfigItemData"
          :fromSource="selectTree"
          :placeholderLabel="placeholderLabel"
          modelKey="menuList"
          :model="childModel"
        >
        </my-treeModal>
      </div>
      <div class="m10">
        <myUpload
          :formConfigData="formConfigItemData"
          :fromSource="upload"
          modelKey="uploadList"
          :model.sync="uploadValList"
        ></myUpload>
      </div>
    </div> -->
  </div>
</template>

<script>
import vueForm from "@/components/vueForm/vueForm.vue";
import myAutoComplete from "@/components/vueForm/myAutoComplete.vue";
import myButton from "@/components/vueForm/myButton.vue";
import myCheckbox from "@/components/vueForm/myCheckbox.vue";
import myCheckboxButton from "@/components/vueForm/myCheckboxButton.vue";
import myDatePicker from "@/components/vueForm/myDatePicker.vue";
import myDialogTree from "@/components/vueForm/myDialogTree.vue";
import myIcon from "@/components/vueForm/myIcon.vue";
import myInput from "@/components/vueForm/myInput.vue";
import myInputNumber from "@/components/vueForm/myInputNumber.vue";
import myQuarterDatepicker from "@/components/vueForm/myQuarterDatepicker.vue";
import myRadio from "@/components/vueForm/myRadio.vue";
import myRadioButton from "@/components/vueForm/myRadioButton.vue";
import mySelect from "@/components/vueForm/mySelect.vue";
import mySelectTree from "@/components/vueForm/mySelectTree.vue";
import mySwitch from "@/components/vueForm/mySwitch.vue";
import myTreeModel from "@/components/vueForm/myTreeModel.vue";
import myUpload from "@/components/vueForm/myUpload.vue";
import XEUtils from "xe-utils";
export default {
  name: "default",
  components: {
    vueForm,
    myAutoComplete,
    myButton,
    myCheckbox,
    myCheckboxButton,
    myDatePicker,
    myDialogTree,
    myIcon,
    myInput,
    myInputNumber,
    myQuarterDatepicker,
    myRadio,
    myRadioButton,
    mySelect,
    mySelectTree,
    mySwitch,
    myTreeModel,
    myUpload,
  },
  data() {
    return {
      formConfigData: {
        button: {
          textAlign: "textRight",
          options: [
            { name: "提交", action: "submit", isVisiable: true },
            { name: "查询", action: "select", isVisiable: true },
          ],
        },
        autoComplete: {
          options: [
            { label: "篮球23222", value: "篮球23" },
            { label: "足球7222", value: "足球7" },
          ],
        },
        checkbox: {
          multiple: true,
          options: [
            { label: "篮球", id: "111" },
            { label: "足球", id: "222" },
          ],
        },
        select: {
          multiple: true,
          options: [
            { label: "篮球", id: "111" },
            { label: "足球", id: "222" },
            { label: "乒乓球", id: "333" },
          ],
        },
        datePicker: {},
        quarterDatepicker: {},
        icon: {
          options: [
            { value: 1, className: "el-icon-delete" },
            { value: 2, className: "el-icon-s-tools" },
            { value: 3, className: "el-icon-phone" },
            { value: 4, className: "el-icon-eleme" },
          ],
        },
        treeModel: {
          multiple: true,
          options: [
            {
              id: 1,
              label: "一级 1",
              children: [
                {
                  id: 4,
                  label: "二级 1-1",
                  children: [
                    {
                      id: 9,
                      label: "三级 1-1-1",
                    },
                    {
                      id: 10,
                      label: "三级 1-1-2",
                    },
                  ],
                },
              ],
            },
            {
              id: 2,
              label: "一级 2",
              children: [
                {
                  id: 5,
                  label: "二级 2-1",
                },
                {
                  id: 6,
                  label: "二级 2-2",
                },
              ],
            },
            {
              id: 3,
              label: "一级 3",
              children: [
                {
                  id: 7,
                  label: "二级 3-1",
                },
                {
                  id: 8,
                  label: "二级 3-2",
                },
              ],
            },
          ],
        },
        switch: {
          activeValue: 1, // switch 打开时的值 [Boolean, String, Number]
          inactiveValue: 0,
        },
        uploadBtn: {
          showFileList: true,
          inputFile: false,
          buttonText:"附件上传"
        },
      },
      customData: [
        {
          code: "span1",
          title: "span框",
          isVisiable: true,
          type: "span",
          isDisabled: false,
        },
        {
          code: "autoComplete",
          title: "自动完成框 ",
          isVisiable: true,
          type: "autoComplete",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "checkbox",
          title: "复选框",
          isVisiable: true,
          type: "checkbox",
          isDisabled: false,
          fromSource: "checkbox",
        },
        {
          code: "checkboxBtn",
          title: "复选按钮",
          isVisiable: true,
          type: "checkboxBtn",
          isDisabled: false,
          fromSource: "checkbox",
        },
        {
          code: "datePicker",
          title: "日期框",
          isVisiable: true,
          type: "datePicker",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "tree",
          title: "下拉树",
          isVisiable: true,
          type: "tree",
          isDisabled: false,
          isRequired: true,
          fromSource: "checkbox",
        },
        {
          code: "icon",
          title: "图标",
          isVisiable: true,
          type: "icon",
          isDisabled: false,
        },
        {
          code: "input",
          title: "文本框",
          isVisiable: true,
          type: "input",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "counter",
          title: "计数器",
          isVisiable: true,
          type: "counter",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "quarterDatepicker",
          title: "季度框",
          isVisiable: true,
          type: "quarterDatepicker",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "radio",
          title: "单选框",
          isVisiable: true,
          type: "radio",
          isDisabled: false,
          fromSource: "checkbox",
        },
        {
          code: "radioBtn",
          title: "单选按钮",
          isVisiable: true,
          type: "radioBtn",
          isDisabled: false,
          fromSource: "checkbox",
        },
        {
          code: "select",
          title: "下拉框",
          isVisiable: true,
          // fromSource: "checkbox",
          type: "select",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "switch",
          title: "switch框",
          isVisiable: true,
          type: "switch",
          isDisabled: false,
        },
        {
          code: "treeModel",
          title: "弹框树",
          isVisiable: true,
          type: "treeModel",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "upload",
          title: "上传附件",
          isVisiable: true,
          type: "upload",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "uploadBtn",
          title: "上传",
          isVisiable: true,
          type: "upload",
          isDisabled: false,
          isRequired: true,
        },
        {
          code: "slot",
          title: "slot内容",
          isVisiable: true,
          type: "slot",
          isDisabled: false,
        },
        {
          span: 24,
          code: "editor",
          title: "编辑框",
          isVisiable: true,
          type: "editor",
          isDisabled: false,
        },
        {
          span: 24,
          code: "button",
          // title: "按钮",
          isVisiable: true,
          type: "button",
          isDisabled: false,
          labelWidth: "0",
        },
      ],
      formObj: {
        span1: "<h1>span标题1</h1>",
        icon: 2,
        autoComplete: "篮球23",
        checkbox: ["111", "222"],
        checkboxBtn: ["111", "222"],
        counter: 17,
        datePicker: "2021-01-17",
        icon: 2,
        input: "文本框input",
        quarterDatepicker: "2021 年 1 季度",
        radio: "222",
        radioBtn: "111",
        select: ["222"],
        span1: "<h1>span标题1</h1>",
        tree: ["111", "222"],
        treeModel: [7],
        treeModelName: "二级 3-1",
        upload: [],
        uploadBtn: [],
        switch: 1,
        editor: "编辑框",
      },
      autoComplete: "autoComplete",
      button11: "button11",
      checkbox: "checkbox",
      iconObj: "iconObj",
      modelIcon: 3,
      selectTree: "selectTree",
      upload: "upload",
      placeholderLabel: "标题1",
      childModel: "success",
      uploadValList: [
        // {
        //   name: "food.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
        // {
        //   name: "food2.jpeg",
        //   url:
        //     "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        // },
      ],
      formConfigItemData: {
        publicAttr: {
          isCustomData: true,
        },
        autoComplete: {
          options: [
            { value: "1三全鲜食（北新泾店）", label: "长宁区新渔路144号" },
            {
              value: "2Hot honey 首尔炸鸡（仙霞路）",
              label: "上海市长宁区淞虹路661号",
            },
            {
              value: "3新旺角茶餐厅",
              label: "上海市普陀区真北路988号创邑金沙谷6号楼113",
            },
            { value: "4泷千家(天山西路店)", label: "天山西路438号" },
            {
              value: "5胖仙女纸杯蛋糕（上海凌空店）",
              label: "上海市长宁区金钟路968号1幢18号楼一层商铺18-101",
            },
            { value: "6贡茶", label: "上海市长宁区金钟路633号" },
            {
              value: "7豪大大香鸡排超级奶爸",
              label: "上海市嘉定区曹安公路曹安路1685号",
            },
            {
              value: "8茶芝兰（奶茶，手抓饼）",
              label: "上海市普陀区同普路1435号",
            },
            { value: "9十二泷町", label: "上海市北翟路1444弄81号B幢-107" },
            { value: "0星移浓缩咖啡", label: "上海市嘉定区新郁路817号" },
            { value: "阿姨奶茶/豪大大", label: "嘉定区曹安路1611号" },
            { value: "新麦甜四季甜品炸鸡", label: "嘉定区曹安公路2383弄55号" },
            {
              value: "Monica摩托主题咖啡店",
              label: "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F",
            },
            {
              value: "浮生若茶（凌空soho店）",
              label: "上海长宁区金钟路968号9号楼地下一层",
            },
            {
              value: "NONO JUICE  鲜榨果汁",
              label: "上海市长宁区天山西路119号",
            },
            { value: "CoCo都可(北新泾店）", label: "上海市长宁区仙霞西路" },
            {
              value: "快乐柠檬（神州智慧店）",
              label: "上海市长宁区天山西路567号1层R117号店铺",
            },
            {
              value: "Merci Paul cafe",
              label: "上海市普陀区光复西路丹巴路28弄6号楼819",
            },
            {
              value: "猫山王（西郊百联店）",
              label: "上海市长宁区仙霞西路88号第一层G05-F01-1-306",
            },
            { value: "枪会山", label: "上海市普陀区棕榈路" },
            { value: "纵食", label: "元丰天山花园(东门) 双流路267号" },
            { value: "钱记", label: "上海市长宁区天山西路" },
            { value: "壹杯加", label: "上海市长宁区通协路" },
            {
              value: "唦哇嘀咖",
              label: "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元",
            },
            { value: "爱茜茜里(西郊百联)", label: "长宁区仙霞西路88号1305室" },
            {
              value: "爱茜茜里(近铁广场)",
              label:
                "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺",
            },
            {
              value: "鲜果榨汁（金沙江路和美广店）",
              label: "普陀区金沙江路2239号金沙和美广场B1-10-6",
            },
            {
              value: "开心丽果（缤谷店）",
              label: "上海市长宁区威宁路天山路341号",
            },
            { value: "超级鸡车（丰庄路店）", label: "上海市嘉定区丰庄路240号" },
            { value: "妙生活果园（北新泾店）", label: "长宁区新渔路144号" },
            { value: "香宜度麻辣香锅", label: "长宁区淞虹路148号" },
            {
              value: "凡仔汉堡（老真北路店）",
              label: "上海市普陀区老真北路160号",
            },
            { value: "港式小铺", label: "上海市长宁区金钟路968号15楼15-105室" },
            { value: "蜀香源麻辣香锅（剑河路店）", label: "剑河路443-1" },
            { value: "北京饺子馆", label: "长宁区北新泾街道天山西路490-1号" },
            {
              value: "饭典*新简餐（凌空SOHO店）",
              label: "上海市长宁区金钟路968号9号楼地下一层9-83室",
            },
            {
              value: "焦耳·川式快餐（金钟路店）",
              label: "上海市金钟路633号地下一层甲部",
            },
            { value: "动力鸡车", label: "长宁区仙霞西路299弄3号101B" },
            { value: "浏阳蒸菜", label: "天山西路430号" },
            { value: "四海游龙（天山西路店）", label: "上海市长宁区天山西路" },
            {
              value: "樱花食堂（凌空店）",
              label: "上海市长宁区金钟路968号15楼15-105室",
            },
            { value: "壹分米客家传统调制米粉(天山店)", label: "天山西路428号" },
            {
              value: "福荣祥烧腊（平溪路店）",
              label: "上海市长宁区协和路福泉路255弄57-73号",
            },
            {
              value: "速记黄焖鸡米饭",
              label: "上海市长宁区北新泾街道金钟路180号1层01号摊位",
            },
            { value: "红辣椒麻辣烫", label: "上海市长宁区天山西路492号" },
            {
              value: "(小杨生煎)西郊百联餐厅",
              label: "长宁区仙霞西路88号百联2楼",
            },
            { value: "阳阳麻辣烫", label: "天山西路389号" },
            {
              value: "南拳妈妈龙虾盖浇饭",
              label: "普陀区金沙江路1699号鑫乐惠美食广场A13",
            },
          ],
        },
        button11: {
          options: [
            {
              action: "add",
              name: "新增",
              isVisiable: true,
            },
            {
              action: "edit",
              name: "编辑",
              isVisiable: true,
            },
          ],
        },
        checkbox: {
          options: [
            { label: "篮球", id: "111" },
            { label: "足球", id: "222" },
          ],
        },
        iconObj: {
          options: [
            { value: 1, className: "el-icon-delete" },
            { value: 2, className: "el-icon-s-tools" },
            { value: 3, className: "el-icon-phone" },
          ],
        },
        selectTree: {
          isDialog: true,
          multiple: false,
          options: [
            {
              id: "success",
              label: "With children",
              // children: [],
            },
            {
              id: "no-children",
              label: "With no children",
              // children: [],
            },
            {
              id: "failure",
              label: "Demonstrates error handling",
              children: [
                {
                  id: "failure11",
                  label: "Demonstrates error handling11",
                  children: [],
                },
              ],
            },
          ],
        },
        upload: {
          // showFileList:false,
          // listType: "picture",
          // inputFile: true,
        },
      },
    };
  },
  created() {},
  mounted() {
    // console.log("3443434==================",XEUtils.isEqual([{a:4}], [{a:4}]))
    // setTimeout(()=>{
    this.$refs.vueform.setFormValue(this.formObj);
    // },1000)
    let v1 = { a: 11, b: { b1: 22 } };
    let v2 = XEUtils.clone(v1);
    if (v1.b === v2.b) {
      // true
    }
    let v3 = XEUtils.clone(v1, true);
    if (v1.b === v3.b) {
      // false
    }
    // console.log(45, v1.b.b1===v3.b.b1,v3.b.b1);
  },
  methods: {
    seasonChange(val) {
      // console.log("季");
      // console.log(val);
      // this.$emit("datetimeChange", val);
    },
    buttonClick(key, btnItem) {
      if (key == "button_1") {
        if (btnItem.action == "submit") {
          // console.log(234, key, btnItem);
          this.$refs.vueform.$refs.forms.validate((valid) => {
            console.log(43, this.formObj);
          });
        }
      }
    },
  },
};
</script>

<style>
</style>
